
.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.dialog {
			position: absolute;
			z-index: 1;
			background-color: #fff;
			border-radius: 10px;
			
			/* 竖向 */
			&.portrait{
				.content{
					.handWritingCanvas{
						width: 96vw;
						height: 72vw;
					}
				}
			}
			/* 横向  */
			&.landscape{
				transform:rotate(90deg);
				.content{
					.handWritingCanvas{
						width: 80vh;
						height: 60vw;
						background-color: #10AEFF;
					}
				}
			}

			.header {
				color: #666666;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				font-size: 18px;
				height: 50px;
				border-bottom: 1px solid #DDDDDD;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			.content{
				background-color: #EEEEEE;
			}

			.footer {
				display: flex;
				flex-direction: row;
				height: 50px;

				& .btn:nth-child(1) {
					border-left: 1px solid transparent;
				}
			}

			.btn {
				flex: 1;
				color: #007aff;
				display: flex;
				flex-direction: row;
				font-size: 18px;
				justify-content: center;
				align-items: center;
				border-top: 1px solid #DDDDDD;
				border-left: 1px solid #DDDDDD;
				box-sizing: border-box;
			}
		}
		
	}